<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新闻</title>
    <!-- 先引入 ElementPlus 样式 -->
    <link rel="stylesheet" href="../../yl/index.css" />
    <!-- 再引入自定义样式 -->
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="../../yl/icon.css" />
    <script src="../../yl/vue.js"></script>
    <script src="../../yl/index.iife.min.js"></script>
    <script src="../../yl/index.js"></script>
    <script src="../../yl/jquery.min.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="news_page">
        <!-- 头部 -->
        <div class="title">
          <div style="margin-bottom: 1%">总新闻数{{ totalMembers }}条</div>
          <div>
            新闻标题:<el-input
              v-model="input.searchText"
              style="width: 200px; margin-left: 10px"
              placeholder="请输入新闻标题"
            ></el-input>
            新闻类型：
            <el-select
              v-model="value"
              placeholder="请选择情新闻类型"
              style="width: 200px"
            >
              <el-option
                v-for="item in data"
                :key="item.value"
                :label="item.News_Category"
                :value="item.News_Category_SerialNumber"
              >
              </el-option>
            </el-select>
            <el-button type="danger" style="margin-left: 1%" @click="check"
              >查询</el-button
            >
            <el-button style="width: 60px" @click="reset">重置</el-button>
            <button class="button" @click="addnews">添加</button>
            <!-- <button class="button">批量导入/更新</button>
                    <button class="button">批量删除</button>
                    <button class="button">批量导出</button> -->
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom_box">
          <!-- 左侧 分类栏 -->
          <div class="item left-type">
            <span
              >新闻分类

              <el-button type="primary" link @click="handleAdd(data)">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-button>
            </span>

            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleClick"
            >
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  <div>
                    <el-button type="primary" link @click="handleModify(data)">
                      <el-icon>
                        <Edit />
                      </el-icon>
                    </el-button>
                    <el-button type="danger" link @click="handleDel(data)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
              </template>
            </el-tree>
            <!-- 弹出层 -->
            <el-dialog
              class="diadog"
              v-model="dialogVisible"
              title="请添加新闻分类"
              width="500"
              :before-close="handleClose"
            >
              <div class="news">
                <div>新闻标题:</div>
                <input
                  class="inputs"
                  v-model="News_Category"
                  type="text"
                  placeholder="请添加新闻分类"
                />
              </div>
              <div class="tcc">
                <div class="qr" @click="queren">确认</div>
                <div class="xx" @click="Cancel">取消</div>
              </div>
            </el-dialog>
            <el-dialog
              class="diadog"
              v-model="diaModify"
              title="请编辑新闻类"
              width="500"
              :before-close="handleClose"
            >
              <div class="news">
                <div>新闻标题:</div>
                <input
                  class="inputs"
                  v-model="News_modfiy"
                  type="text"
                  placeholder="请编辑新闻类"
                />
              </div>
              <div class="tcc" style="display: flex; gap: 30px">
                <div class="qr" @click="disabledModify">确认</div>
                <div class="xx" @click="Cancels">取消</div>
              </div>
            </el-dialog>
          </div>
          <!-- 右侧 信息表 -->
          <div class="item right-table">
            <!-- 切换框 -->
            <el-tabs
              v-model="activeName"
              type="card"
              class="demo-tabs"
              @tab-click="handleTabClick"
            >
              <el-tab-pane label="全部" name="first"></el-tab-pane>
              <el-tab-pane label="审核中" name="second"></el-tab-pane>
              <el-tab-pane label="已发布" name="third"></el-tab-pane>
              <el-tab-pane label="未通过" name="fourth"></el-tab-pane>
            </el-tabs>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                type="selection"
                :selectable="selectable"
                width="55"
              ></el-table-column>
              <el-table-column type="index" label="序号" width="120">
              </el-table-column>
              <el-table-column
                property="name"
                label="新闻编号"
                width="120"
                prop="News_SerialNumber"
              ></el-table-column>
              <el-table-column label="封面图">
                <template #default="scope">
                  <img
                    :src="scope.row.News_Image_URL"
                    alt="封面图"
                    style="width: 50px; height: 50px; object-fit: cover"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="新闻标题"
                prop="News_Title"
              ></el-table-column>
              <el-table-column
                label="新闻标类流水号"
                prop="News_Category_SerialNumber"
              ></el-table-column>
              <!-- <el-table-column label="新闻内容" prop="News_Content"></el-table-column> -->
              <el-table-column
                prop="News_Publish_Datetime"
                label="发布时间"
              ></el-table-column>
              <el-table-column
                prop="News_Views_Count"
                label="新闻阅读量统计"
                align="center"
              ></el-table-column>
              <el-table-column label="操作">
                <!-- 编辑 -->
                <template #default="scope">
                  <!-- 编辑按钮 -->
                  <el-button size="small" @click="handleEdit(scope.row)"
                    >编辑</el-button
                  >
                  <!-- 删除按钮 -->
                  <el-button
                    type="danger"
                    size="small"
                    @click="handleDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div>
              <div class="example-pagination-block">
                <el-pagination
                  v-model:current-page="currentPage4"
                  v-model:page-size="pageSize4"
                  :page-sizes="[100, 200, 300, 400]"
                  :size="size"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="100"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./js/news.js"></script>
  </body>
</html>
